<template>
  <div>
    <el-card>
      <!-- <div class="header-container">
        <el-input
          class="search"
          style="width: 180px"
          v-model="name"
          placeholder="姓名"
          @keyup.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch"
          >搜索<el-icon class="el-icon--right"
            ><el-icon icon="icon-search" /></el-icon
        ></el-button>
        <el-button type="success" @click="handleAdd"
          >增加<el-icon class="el-icon--right"
            ><el-icon icon="icon-add" /></el-icon
        ></el-button>
        <el-button @click="handleReset"
          >重置<el-icon type="success" class="el-icon--right"
            ><el-icon icon="icon-reset" /></el-icon
        ></el-button>
      </div> -->
      <div class="table-container">
        <el-table
          :data="tableData"
          table-layout="fixed"
          :border="true"
          v-loading="tableLoad"
          :header-cell-style="{ background: '#F5F7FA' }"
        >
          <el-table-column prop="id" label="ID" width="180" :align="'center'" />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
            :align="'center'"
          />
          <el-table-column
            prop="leaveTime"
            label="离校时间"
            width="180"
            :align="'center'"
          />

          <el-table-column
            prop="backTime"
            label="返校时间"
            width="180"
            :align="'center'"
          />
          <el-table-column prop="travel" label="去向" :align="'center'" />
          <el-table-column prop="reason" label="原因" :align="'center'" />
          <el-table-column label="操作" :align="'center'">
            <template #default="scope">
              <el-button
                type="success"
                size="small"
                @click="handleConfirm(scope.$index, scope.row)"
              >
                批准
                <i-ep-check />
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click.stop="handleReject(scope.$index, scope.row)"
              >
                驳回

                <i-ep-close />
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-block">
        <el-config-provider :locale="local">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import zhcn from 'element-plus/lib/locale/lang/zh-cn'
import { getNoteTeacher, updateNote } from '@/api/modules/note'
import { usePagination } from '@/hooks/usePagination'

// 语言为中文
const local = zhcn

// ------------------------------ 组合式函数 ------------------------------
// 解构响应式变量
const {
  pageNo,
  pageSize,
  pageSizes,
  pageTotal,
  tableData,
  tableLoad,
  handleCurrentChange,
  handleSizeChange,
  getByPage,
} = usePagination(getNoteTeacher)

// ------------------------------ 按钮 ------------------------------
// 假条接口类型
interface INoteData {
  id: number
  name: string
  leaveTime: string
  backTime: string
  travel: string
  reason: string
}
// 批准
const handleConfirm = async (index: number, row: INoteData) => {
  tableLoad.value = true
  await updateNote(row.id, 0)
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
  await getByPage(pageNo.value, pageSize.value)
}
// 驳回
const handleReject = async (_index: number, row: INoteData) => {
  tableLoad.value = true
  await updateNote(row.id, 2)
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
  await getByPage(pageNo.value, pageSize.value)
}

// ------------------------------ 预留 ------------------------------
// TODO 待编程
const handleSearch = () => {}
const handleReset = () => {}
const handleAdd = () => {}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
